<template>
  <FilterGroup :tags="tags" :filters.sync="filters" @onCloseTag="handleCloseTag">
    <FilterItem :data-count="10" :data-obj="cityFilterData" :checked-nodes.sync="belongDistrict" />
    <FilterItem :data-obj="projectTypeFilterData" :checked-nodes.sync="type" />
    <FilterItem :data-obj="projectStatusFilterData" :checked-nodes.sync="status" />
  </FilterGroup>
</template>

<script lang="ts">
import Vue from 'vue'
import { mapGetters } from 'vuex'
import FilterGroup from '@/components/portal/FilterGroup.vue'
import FilterItem from '@/components/portal/FilterItem.vue'
export default Vue.extend({
  components: { FilterItem, FilterGroup },
  props: {
    checked: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      belongDistrict: { label: '所在城市', checked: [] },
      type: { label: '项目类型', checked: [] },
      status: { label: '项目状态', checked: [] },
      filters: [],
    }
  },
  computed: {
    ...mapGetters('tree', ['city', 'industryLevel0']),
    ...mapGetters('dictionary', ['codes']),
    cityFilterData() {
      return {
        label: '所在城市',
        key: 'belongDistrict',
        checked: [],
        filterNames: this.city,
      }
    },
    projectTypeFilterData() {
      return {
        label: '项目类型',
        key: 'type',
        checked: [],
        filterNames: this.codes.project_type,
      }
    },
    projectStatusFilterData() {
      return {
        label: '项目状态',
        key: 'status',
        checked: [],
        filterNames: this.codes.project_status,
      }
    },
    tags: {
      get() {
        return [this.belongDistrict, this.type, this.status]
      },
    },
  },
  watch: {
    filters(val) {
      this.$emit('update:checked', val)
    },
  },
  methods: {
    handleCloseTag(tag) {
      this[tag.key] = {
        label: tag.label,
        checked: [],
      }
    },
  },
})
</script>
<style lang="scss" scoped></style>
